<template>
    <div class="pie">
        <div id="pie" :style="{ width: '300px', height: '200px' }"></div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";
let myEcharts = echarts;
onMounted(() => {
    initChart();
});
onUnmounted(() => {
    myEcharts.dispose;
});
function initChart() {
    let chart = myEcharts.init(document.getElementById("pie"), "purple-passion");
    chart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
            {
                name: '国家',
                type: 'pie',
                selectedMode: 'single',
                radius: ['25%', '40%'],
                label: {
                    position: 'inner',
                    fontSize: 14
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1548, name: '中国' },
                    { value: 679, name: '印度' }
                ]
            },
            {
                name: '类型',
                type: 'pie',
                radius: ['45%', '60%'],
                labelLine: {
                    length: 30
                },
                label: {},
                data: [
                    { value: 4951, name: '军用' },
                    { value: 1000, name: '民用' },
                    { value: 1000, name: '其他' },
                    { value: 2049, name: '军用' },
                    { value: 1000, name: '民用' }
                ]
            }
        ]
    });
    window.onresize = function () {
        chart.resize();
    };
}
</script>

<style lang="scss" scoped>
.pie {
    width: 300px;
    height: 200px;
    background: #ffffff;
}
</style>